<template>
	<view class="danmaku-container" :style="{ height: containerHeight, width: containerWidth }">
		<!-- 弹幕项 -->
		<view
			class="danmaku-item"
			v-for="(item, index) in visibleDanmus"
			:key="item.id"
			:style="{
				top: 0,
				left: '750rpx'
			}"
		>    <view class="item" style="display: flex;flex-direction: row;"><image class="img"  :src="item.url" mode="aspectFill" :style="{width:item.fontSize+'px',height:item.fontSize+'px',borderRadius:'50% '}"></image>
			<text :style="{ color: item.color, fontSize: item.fontSize + 'px' }">{{ item.userName }}:</text>
			<text style="font-size:28rpx;color: #55aaff;" >{{item.content}} </text>
			</view>
		  
		</view>
	</view>
</template> 

<script>
export default {
	props: {
		containerHeight: {
			type: String,
			default: '200px'
		},
		lineGap: {
			type: Number,
			default: 30
		},
		// 由父组件传入容器宽度
		containerWidth: {
			type: Number,
			required: true
		}
	},
	data() {
		return {
			danmuPool: [], // 所有弹幕
			visibleDanmus: [], // 正在显示的弹幕
			idSeed: 0,
			lines: 1, // 行数
			animationTimer: null, // 动画定时器
			frameInterval: 30 // 每帧间隔时间(ms)
		};
	},
	created() {
		// 计算行数（根据高度和行间距）
	//	const height = parseInt(this.containerHeight);
		//this.lines = Math.floor(height / this.lineGap);
		uni.$on('onLineNoti', (res) => {
	
			this.addDanmu(res.data,'online');
		});
		uni.$on("public_msg",res=>{
	
			this.dunmakeMsg(res)
		})
		// 启动动画循环
		this.startAnimation();
	},
	beforeDestroy() {
		uni.$off('onLineNoti');
		uni.$off('public_msg')
		// 停止动画 - 只使用clearTimeout
		if (this.animationTimer) {
			clearTimeout(this.animationTimer);
			this.animationTimer = null;
		}
	},
	methods: {
		// 添加弹幕
		addDanmu(content,type, color = '', fontSize = 16) {
			this.idSeed++;
			// 随机分配到一行
			//const line = Math.floor(Math.random() * this.lines);
			const line =1

			this.danmuPool.push({
				id: this.idSeed,
				userId:content.userId,
				userName:content.nicName,
				content:type==='online'?'进来了':content.content,
				type:type,
				url:content.nicPic.url,
				color: color || this.getRandomColor(),
				fontSize: fontSize,
				line,
				speed: 2 + Math.random() * 1.5, // 移动速度(px/帧)
				position: '750rpx' // 初始位置在右侧
			});
			
		},
        dunmakeMsg(message){
		
			var content=''
			switch(message.messageType){
				case 1:content='发了一条语音信息';
				break;
				case 2:content=message.content.text
				break;
				case 3:content='发了图片信息'
				break;
				case 4:content='发了商品信息'
				break;
				case 5: content='发了店铺信息'
				break;
				case 6:content="发了视频信息"
				break;
				default: break;
			}
			
			const msg={
				userId:message.userId,
				userName:message.nicName,
				nicPic:message.nicPic,
				content:content
			}
			
			
			this.addDanmu(msg,'msg')
			
			
		},
		// 生成随机颜色
		getRandomColor() {
			const colors = ['#333333', '#e53935', '#43a047', '#1e88e5', '#8e24aa', '#f57c00', '#00acc1', '#5d4037'];
			return colors[Math.floor(Math.random() * colors.length)];
		},

		// 动画循环 - 完全使用setTimeout
		startAnimation() {
			// 清除可能存在的定时器，避免多重循环
			if (this.animationTimer) {
				clearTimeout(this.animationTimer);
			}

			const update = () => {
				// 更新可见弹幕位置
				this.visibleDanmus = this.visibleDanmus.filter((item) => {
					item.position -= item.speed;
					// 弹幕完全移出左侧时移除（300是预估的最大弹幕宽度）
					return item.position > -300;
				});

				// 从池子里取出新弹幕（控制弹幕密度）
				if (this.danmuPool.length > 0 && this.visibleDanmus.length < this.lines * 2) {
					const newDanmu = this.danmuPool.shift();
					this.visibleDanmus.push(newDanmu);
					
				}

				// 继续动画循环
				this.animationTimer = setTimeout(update, this.frameInterval);
			};

			// 开始第一帧
			update();
		}
	}
};
</script>

<style scoped>
.danmaku-container {
	position: relative;
	overflow: hidden;
}
.danmaku-item {
	position: absolute;


	/* #ifndef APP-PLUS-NVUE */
		white-space: nowrap;
	/* #endif */
	padding: 4px 12px;
	border-radius: 20px;
	background-color: rgba(255, 255, 255, 0.7);
	z-index: 10;
	
}
.item{
	display: flex;
	flex-direction: row;
	align-items: center;
	/*#ifndef APP-PLUS-NVUE*/  
	gap: 10rpx;
	/*#endif*/
}

</style>
